<template>
	<view class="content">

		<!-- 商城轮播图 -->
		<swiper class="shop-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>

		<!-- 分类导航 -->
		<view class="category-nav">
			<view class="category-item">
				<image src="http://121.36.197.175:19000/test/icon-farm-select.png" mode="aspectFit"></image>
				<text>商品分类</text>
			</view>
			<view class="category-item">
				<image src="http://121.36.197.175:19000/test/icon-farm-price.png" mode="aspectFit"></image>
				<text>砍价活动</text>
			</view>
			<view class="category-item">
				<image src="http://121.36.197.175:19000/test/icon-farm-promotion.png" mode="aspectFit"></image>
				<text>拼团促销</text>
			</view>
			<view class="category-item">
				<image src="http://121.36.197.175:19000/test/icon-farm-mall.png" mode="aspectFit"></image>
				<text>积分商城</text>
			</view>

		</view>

		<!-- 限时抢购 -->
		<view class="section-header">
			<view class="section-title">
				<u-icon name="clock" color="#FF5722" size="24"></u-icon>
				<text>限时抢购</text>
			</view>
			<view class="section-more" @click="navToMoreSeckill">查看更多 <u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="seckill-loading" v-if="loading">
			<u-loading-icon color="#FF5722" mode="circle" size="28"></u-loading-icon>
			<text>加载中...</text>
		</view>

		<!-- 限时抢购商品网格 -->
		<view class="product-grid" v-else>
			<view class="product-item seckill-product" v-for="(item, index) in seckillList" :key="index"
				@click="navToSeckillDetail(item)">
				<view class="seckill-badge" v-if="!isExpired(item) && item.remain > 0">秒杀</view>
				<image class="product-image"
					:src="item.plot && item.plot.imageUrl ? item.plot.imageUrl : 'http://121.36.197.175:19000/test/swiper1.jpg'"
					mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">
						{{item.plot && item.plot.name ? item.plot.name : (item.plot && item.plot.position ? item.plot.position : '地块'+(index+1))}}
					</view>
					<view class="seckill-time-container">
						<block v-if="!isExpired(item)">
							<view class="countdown-box">
								<text class="seckill-time-label">剩余</text>
								<view class="time-unit">
									<text class="time-num">{{formatRemainTime(item).split(':')[0]}}</text>
								</view>
								<text class="time-separator">:</text>
								<view class="time-unit">
									<text class="time-num">{{formatRemainTime(item).split(':')[1]}}</text>
								</view>
								<text class="time-separator">:</text>
								<view class="time-unit">
									<text class="time-num">{{formatRemainTime(item).split(':')[2]}}</text>
								</view>
							</view>
						</block>
						<view class="seckill-end" v-else>已结束</view>
					</view>
					<view class="seckill-progress-container">
						<view class="seckill-progress">
							<view class="progress-bg">
								<view class="progress-bar" :style="{width: getProgressPercent(item) + '%'}"></view>
							</view>
							<text class="seckill-remain">剩余{{item.remain || 0}}/{{item.total || 1}}</text>
						</view>
					</view>
					<view class="product-price-row">
						<view class="product-price-container">
							<text class="product-price-symbol">¥</text>
							<text class="product-price">{{item.price || '88.00'}}</text>
							<text class="product-price-original"
								v-if="item.originalPrice">¥{{item.originalPrice}}</text>
						</view>
						<view class="seckill-btn" :class="{'seckill-btn-disabled': isExpired(item) || item.remain <= 0}"
							@click.stop="handleSeckill(item)">
							<text v-if="isExpired(item)">已结束</text>
							<text v-else-if="item.remain <= 0">已抢光</text>
							<text v-else>立即抢购</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 暂无限时抢购活动 -->
			<view class="seckill-empty" v-if="seckillList.length === 0">
				<view class="empty-content">
					<u-icon name="info-circle" color="#999" size="40"></u-icon>
					<text>暂无限时抢购活动</text>
					<view class="empty-tip">关注后续活动，敬请期待</view>
				</view>
			</view>
		</view>

		<!-- 热销商品 -->
		<view class="section-header">
			<view class="section-title">
				<u-icon name="fire" color="#FF5722" size="24"></u-icon>
				<text>热销商品</text>
			</view>
			<view class="section-more">查看更多 <u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>

		<view class="product-grid">
			<!-- 商品项目1 -->
			<view class="product-item">
				<image class="product-image" src="http://121.36.197.175:19000/test/swiper1.jpg" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">有机青菜 500g</view>
					<view class="product-price-row">
						<view class="product-price">¥15.80</view>
						<view class="product-sold">已售280份</view>
					</view>
				</view>
			</view>

			<!-- 商品项目2 -->
			<view class="product-item">
				<image class="product-image" src="http://121.36.197.175:19000/test/swiper1.jpg" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">农家散养土鸡蛋 30枚</view>
					<view class="product-price-row">
						<view class="product-price">¥36.90</view>
						<view class="product-sold">已售452份</view>
					</view>
				</view>
			</view>

			<!-- 商品项目3 -->
			<view class="product-item">
				<image class="product-image" src="http://121.36.197.175:19000/test/swiper1.jpg" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">新鲜水蜜桃 2kg</view>
					<view class="product-price-row">
						<view class="product-price">¥58.00</view>
						<view class="product-sold">已售189份</view>
					</view>
				</view>
			</view>

			<!-- 商品项目4 -->
			<view class="product-item">
				<image class="product-image" src="http://121.36.197.175:19000/test/swiper1.jpg" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">山泉水灌溉大米 5kg</view>
					<view class="product-price-row">
						<view class="product-price">¥85.50</view>
						<view class="product-sold">已售375份</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 秒杀提示弹窗 -->
		<u-popup v-model="showResult" mode="center" border-radius="14" width="70%" :mask-close-able="true">
			<view class="result-popup" :class="{'success-popup': seckillSuccess}">
				<view class="success-animation" v-if="seckillSuccess">
					<view class="confetti confetti-1"></view>
					<view class="confetti confetti-2"></view>
					<view class="confetti confetti-3"></view>
					<view class="confetti confetti-4"></view>
					<view class="confetti confetti-5"></view>
					<view class="confetti confetti-6"></view>
				</view>
				<view class="result-icon">
					<u-icon :name="seckillSuccess ? 'checkmark-circle' : 'close-circle'"
						:color="seckillSuccess ? '#4CD964' : '#FA3534'" size="60"></u-icon>
				</view>
				<view class="result-title" :class="{'success-title': seckillSuccess}">
					{{seckillSuccess ? '抢购成功' : '抢购失败'}}</view>
				<view class="result-message">{{resultMessage}}</view>
				<view class="result-actions">
					<button class="action-btn" @click="closeResultPopup">确定</button>
					<button class="action-btn action-primary" v-if="seckillSuccess"
						@click="goToOrderDetail">查看订单</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 导入uview所需组件
	import uIcon from "uview-ui/components/u-icon/u-icon.vue"
	import uLoadingIcon from "uview-ui/components/u-loading-icon/u-loading-icon.vue"
	import uPopup from "uview-ui/components/u-popup/u-popup.vue"

	export default {
		components: {
			uIcon,
			uLoadingIcon,
			uPopup
		},
		data() {
			return {
				swiperList: [
					"http://121.36.197.175:19000/test/shopping-swiper1.jpg",
					"http://121.36.197.175:19000/test/shopping-swiper2.jpg",
				],
				seckillList: [],
				timer: null,
				userId: '', 
				loading: true, 
				showResult: false, // 是否显示结果弹窗
				seckillSuccess: false, // 秒杀是否成功
				resultMessage: '', // 结果信息
				currentOrderId: '' // 当前订单ID
			}
		},
		onLoad() {
			this.loadSeckillData();

			// 从本地存储获取用户ID
			try {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userId = userInfo.userId;
				} else {
					// 如果未登录，跳转到登录页
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			} catch (e) {
				console.error('读取用户信息失败', e);
			}
		},
		onShow() {
			// 每次显示页面时刷新数据
			this.loadSeckillData();

			// 检查用户ID是否有效
			try {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userId = userInfo.userId;
				} else if (!this.userId) {
					// 如果未登录且userId为空，跳转到登录页
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			} catch (e) {
				console.error('读取用户信息失败', e);
			}
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			loadSeckillData() {
				// 获取限时抢购数据
				this.loading = true;

				uni.request({
					url: '/secondkill/list', 
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					success: (res) => {
						this.loading = false;
						
						// 检查响应格式是否正确
						if (typeof res.data === 'string') {
							uni.showToast({
								title: '服务器响应格式错误',
								icon: 'none'
							});
							return;
						}

						// 检查业务状态码
						if (res.data && res.data.code === 200) {
							this.processSeckillData(res.data.data);
						} else {
							// 处理错误情况
							uni.showToast({
								title: res.data?.message || '获取秒杀数据失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						this.loading = false;
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 处理秒杀数据
			processSeckillData(data) {
				const secondkills = data.secondkills || [];
				const landMap = data.landMap || {};
				// console.log(landMap,'landMap------323');
				

				// 处理秒杀列表数据
				this.seckillList = secondkills.map(item => {
					// 处理开始时间
					const startTime = this.parseTimeToTimestamp(item.skstarttime);
					
					// 获取土地信息
					const land = landMap[item.landid] || {};
					
					return {
						skId: item.skid,
						landId: item.landid,
						price: item.skprice,
						originalPrice: land.price,
						startTime: startTime,
						duration: item.sktime * 3600 * 1000, // 小时转换为毫秒
						remain: item.sknum - (item.soldnum || 0),
						total: item.sknum,
						plot: {
							name: land.name,
							position: land.position, 
							imageUrl: land.imageUrl
						}
					};
				});

				// 设置定时器，每秒更新倒计时
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.timer = setInterval(() => {
					this.$forceUpdate(); // 强制刷新视图
				}, 1000);
			},
			
			// 将各种时间格式转换为毫秒时间戳
			parseTimeToTimestamp(timeValue) {
				// 处理不同格式的时间
				if (typeof timeValue === 'string') {
					// ISO日期字符串或普通日期字符串
					if (timeValue.includes('T') || timeValue.includes('-')) {
						return new Date(timeValue).getTime();
					} 
					// 数字字符串
					else if (!isNaN(timeValue)) {
						const timestamp = parseInt(timeValue);
						// 秒级时间戳转毫秒
						return timestamp < 1000000000000 ? timestamp * 1000 : timestamp;
					}
				} 
				// 数字类型
				else if (typeof timeValue === 'number') {
					// 秒级时间戳转毫秒
					return timeValue < 1000000000000 ? timeValue * 1000 : timeValue;
				}
				
				// 无法识别的格式返回当前时间
				return new Date().getTime();
			},
			
			isExpired(item) {
				if (!item.startTime || !item.duration) {
					return true;
				}
				
				const now = new Date().getTime();
				const endTimeMs = item.startTime + item.duration;
				
				// 检查是否已过期
				return now > endTimeMs;
			},
			formatRemainTime(item) {
				if (!item.startTime || !item.duration) {
					return '00:00:00';
				}

				const now = new Date().getTime();
				const endTimeMs = item.startTime + item.duration;
				
				let remainTime = endTimeMs - now;
				if (remainTime <= 0) {
					return '00:00:00';
				}

				// 转换为时分秒
				const hours = Math.floor(remainTime / (1000 * 60 * 60));
				remainTime -= hours * 1000 * 60 * 60;
				const minutes = Math.floor(remainTime / (1000 * 60));
				remainTime -= minutes * 1000 * 60;
				const seconds = Math.floor(remainTime / 1000);

				return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			getProgressPercent(item) {
				if (!item.total || !item.remain) {
					return 0;
				}

				const total = parseInt(item.total);
				const remain = parseInt(item.remain);

				if (total <= 0) return 0;

				// 计算已售百分比
				const sold = total - remain;
				return (sold / total) * 100;
			},
			handleSeckill(item) {
				if (this.isExpired(item) || item.remain <= 0) {
					return;
				}

				// 检查用户是否已登录
				if (!this.userId) {
					uni.showModal({
						title: '提示',
						content: '请先登录后再抢购',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return;
				}

				// 直接跳转到商品详情页
				uni.navigateTo({
					url: `/pages/shop/productDetail?skId=${item.skId}&landId=${item.landId}`
				});
			},
			closeResultPopup() {
				this.showResult = false;
			},
			goToOrderDetail() {
				// 关闭弹窗
				this.showResult = false;

				// 跳转到商品详情页并显示订单信息
				if (this.currentOrderId) {
					uni.navigateTo({
						url: `/pages/shop/productDetail?skId=${this.currentSkId}&orderId=${this.currentOrderId}`
					});
				}
			},
			navToSeckillDetail(item) {
				// 跳转到详情页
				uni.navigateTo({
					url: `/pages/shop/productDetail?skId=${item.skId}&landId=${item.landId}`
				});
			},
			navToMoreSeckill() {
				// 跳转到更多秒杀页面
				uni.navigateTo({
					url: '/pages/shop/seckill'
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}

	.shop-swiper {
		height: 400rpx;
		width: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 分类导航 */
	.category-nav {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.category-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.category-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.category-item text {
		font-size: 24rpx;
		color: #666;
	}

	/* 加载状态 */
	.seckill-loading {
		background-color: #ffffff;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.seckill-loading text {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	.seckill-tag {
		position: absolute;
		top: 10rpx;
		left: 0;
		background-color: #FF5722;
		color: #ffffff;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		z-index: 1;
		border-radius: 0 10rpx 10rpx 0;
	}

	.seckill-time-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.seckill-time-label {
		font-size: 22rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.seckill-time {
		font-size: 22rpx;
		color: #FF5722;
		background-color: #FFF2EF;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
	}

	.seckill-end {
		font-size: 22rpx;
		color: #999;
		background-color: #f5f5f5;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
	}

	.seckill-progress {
		margin: 10rpx 0;
	}

	.seckill-remain {
		font-size: 20rpx;
		color: #999;
		display: block;
		margin-top: 4rpx;
	}

	.seckill-btn {
		background-color: #FF5722;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx 0;
		border-radius: 30rpx;
		margin-top: 10rpx;
	}

	.seckill-btn-disabled {
		background-color: #cccccc;
	}

	.seckill-empty {
		width: 90%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 28rpx;
		padding: 40rpx 0;
	}

	.empty-content text {
		margin-top: 20rpx;
	}

	.empty-tip {
		font-size: 24rpx;
		color: #bbb;
		margin-top: 10rpx;
	}

	/* 热销商品 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
	}

	.section-title text {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.section-more {
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
	}

	.product-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0 15rpx;
	}

	.product-item {
		width: 50%;
		padding: 0 15rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		position: relative;
		transition: transform 0.2s;
	}

	.product-item:active {
		transform: scale(0.98);
	}

	.seckill-product {
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.seckill-badge {
		position: absolute;
		top: 16rpx;
		left: 0;
		background: linear-gradient(to right, #FF5722, #FF9500);
		color: #fff;
		font-size: 22rpx;
		font-weight: bold;
		padding: 6rpx 16rpx;
		border-radius: 0 20rpx 20rpx 0;
		z-index: 2;
		box-shadow: 0 2rpx 6rpx rgba(255, 87, 34, 0.3);
	}

	.product-image {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx 12rpx 0 0;
	}

	.product-info {
		padding: 16rpx;
		background-color: #fff;
	}

	.product-title {
		font-size: 28rpx;
		line-height: 1.4;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-weight: bold;
		color: #333;
	}

	/* 倒计时样式 */
	.seckill-time-container {
		display: flex;
		align-items: center;
		margin: 16rpx 0;
	}

	.countdown-box {
		display: flex;
		align-items: center;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #FFF2EF;
	}

	.seckill-time-label {
		font-size: 22rpx;
		color: #FF5722;
		margin-right: 8rpx;
	}

	.time-unit {
		background-color: #FF5722;
		border-radius: 4rpx;
		padding: 4rpx 6rpx;
		min-width: 36rpx;
		text-align: center;
	}

	.time-num {
		font-size: 22rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.time-separator {
		color: #FF5722;
		font-size: 22rpx;
		font-weight: bold;
		margin: 0 4rpx;
	}

	.seckill-end {
		font-size: 22rpx;
		color: #999;
		background-color: #f5f5f5;
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		display: inline-block;
	}

	/* 进度条样式 */
	.seckill-progress-container {
		margin: 12rpx 0;
	}

	.seckill-progress {
		position: relative;
	}

	.progress-bg {
		height: 10rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(to right, #FF5722, #FF9500);
		border-radius: 10rpx;
		transition: width 0.3s;
	}

	.seckill-remain {
		font-size: 20rpx;
		color: #999;
		display: block;
		margin-top: 6rpx;
	}

	/* 价格和按钮样式 */
	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.product-price-container {
		display: flex;
		align-items: baseline;
	}

	.product-price-symbol {
		color: #FF5722;
		font-size: 24rpx;
		font-weight: bold;
	}

	.product-price {
		color: #FF5722;
		font-size: 36rpx;
		font-weight: bold;
	}

	.product-price-original {
		font-size: 22rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 8rpx;
	}

	.seckill-btn {
		background: linear-gradient(to right, #FF5722, #FF9500);
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(255, 87, 34, 0.2);
		font-weight: bold;
	}

	.seckill-btn-disabled {
		background: linear-gradient(to right, #cccccc, #dddddd);
		box-shadow: none;
	}

	/* 改进结果弹窗样式 */
	.result-popup {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.success-popup {
		background-color: #F8FFF8;
		border-top: 8rpx solid #4CD964;
	}

	.result-icon {
		margin-bottom: 30rpx;
	}

	.result-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.success-title {
		color: #4CD964;
	}

	.result-message {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		line-height: 1.5;
		white-space: pre-line;
	}

	.result-actions {
		display: flex;
		justify-content: space-between;
	}

	.action-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
		background-color: #f5f5f5;
		color: #666;
	}

	.action-primary {
		background-color: #4CD964;
		color: #ffffff;
	}

	/* 添加成功动画样式 */
	.success-animation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		pointer-events: none;
	}

	.confetti {
		position: absolute;
		width: 10rpx;
		height: 20rpx;
		opacity: 0;
		animation: confetti-fall 3s ease-out forwards;
	}

	.confetti-1 {
		background-color: #4CD964;
		top: -10%;
		left: 10%;
		animation-delay: 0.1s;
	}

	.confetti-2 {
		background-color: #FF9500;
		top: -10%;
		left: 30%;
		animation-delay: 0.3s;
	}

	.confetti-3 {
		background-color: #007AFF;
		top: -10%;
		left: 50%;
		animation-delay: 0.5s;
	}

	.confetti-4 {
		background-color: #FF2D55;
		top: -10%;
		left: 70%;
		animation-delay: 0.2s;
	}

	.confetti-5 {
		background-color: #5856D6;
		top: -10%;
		left: 90%;
		animation-delay: 0.4s;
	}

	.confetti-6 {
		background-color: #FFCC00;
		top: -10%;
		left: 40%;
		animation-delay: 0.6s;
	}

	@keyframes confetti-fall {
		0% {
			transform: translateY(0) rotate(0deg);
			opacity: 1;
		}

		100% {
			transform: translateY(400rpx) rotate(360deg);
			opacity: 0;
		}
	}
</style>
